<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>团员管理系统</title>
    <link rel="stylesheet" href="./layui.css" />
    <script src="./layui.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        display: flex;
      }
      /* #region 左侧样式 */
      .left {
        width: 200px;
        height: 100vh;
        background-color: #2a354e;
      }
      .left .leftlogo {
        background-color: #224b8f;
        align-items: left;
        line-height: 50px;
        justify-items: center;
      }
      .left .leftlogo img {
        width: 22px;
        padding-left: 20px;
        padding-bottom: 5px;
      }
      .left .leftlogo span {
        font-size: 16px;
        color: #fff;
      }
      .layui-icon {
        padding-right: 10px;
        font-size: 18px;
      }
      .layui-icon-radio {
        font-size: 10px;
      }
      .left .layui-nav {
        border-radius: 0;
        background-color: #2a354e;
      }

      .left .layui-nav .layui-nav-item a {
        color: #bfc6e1;
      }

      .left .layui-nav .layui-nav-item .layui-nav-child:hover {
        color: #2a354e;
      }
      .left .layui-nav .layui-nav-item a:hover {
        color: #fff !important;
      }
      .left .layui-nav .layui-nav-item dd {
        text-align: left;
      }
      .left .layui-nav .layui-nav-item .layui-icon-down {
        display: none;
      }
      .layui-icon-triangle-d {
        position: relative;
        left: 65px;
        font-size: 12px;
      }

      .left .layui-nav .layui-nav-item .layui-nav-child dd .colorfff a {
        color: #fff;
        text-align: center;
      }

      /* #endregion */
      /* #region 右侧样式 */
      .right {
        width: calc(100vw - 200px);
        height: 50px;
        background-color: #2a5caa;
      }
      .lefti {
        width: 30px;
      }
      .lefti .layui-icon-slider {
        font-size: 25px;
        color: #fff;
        height: 50px;
        line-height: 50px;
        padding-left: 10px;
      }
      .right-nav {
        height: 50px;
        display: flex;
        justify-content: space-between;
      }
      .righri ul {
        display: flex;
        justify-content: space-between;
        padding-right: 20px;
      }
      .righri ul li a {
        color: #fff;
      }
      .righri {
        width: 300px;

        line-height: 50px;
        text-align: center;
        justify-items: center;
      }
      .righri img {
        width: 30px;

        border-radius: 50%;
      }
      .index-nav {
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: space-between;
      }
      .layui-breadcrumb {
        padding-left: 10px;
      }
      .zhuye {
        width: 300px;
      }
      .btnav {
        width: 350px;
      }
      .btnav .layui-btn-xs {
        background-color: #4780dc;
      }
      .rbtit {
        height: 50px;
        width: calc(100vw - 200px);
        background-color: #f3f3fa;
        line-height: 50px;
      }
      .rbtit input {
        border: 1px solid #c0cde0;
        border-radius: 5px;
        height: 26px;
        width: 156px;
      }
      .rbtit label {
        padding-left: 5px;
      }
      .rbtit .chaxun {
        margin-left: 15px;
      }
      .boxform {
        display: flex;
        background-color: #f3f3fa;
      }
      .rbody .boxs {
        width: 220px;
        background-color: #fff;
        border: 1px solid #c0cde0;
        height: 80vh;
        margin-left: 15px;
      }
      .boxform .sbtbox {
        width: 180px;
        align-items: center;
        line-height: 46px;
        height: 46px;
        text-align: center;
        margin: 10px;
        background-color: #f1f1fa;
      }
      .rbody .boxl {
        width: 1050px;
        background-color: #fff;
        border: 1px solid #c0cde0;
        height: 80vh;
        margin-left: 15px;
      }
      .layui-btn-radius {
        background-color: #999999;
        width: 45px;
        font-size: 13px;
        font-weight: bolder;
      }
      .sex ul {
        display: none;
      }
       .sex:hover ul {
        display: block;
      }
      .sex h3>a{
        color: #0c61d2!important;
      }
      /* .sex{
        height: 30px;
      } */
      /* #endregion */
    </style>
  </head>
  <body>
    <div class="left">
      <div class="leftlogo">
        <img
          src="https://www.deerpu.cn/demo/file/20210202095046-aasas.png"
          alt=""
        />
        <span>团员信息管理系统</span>
      </div>
      <ul
        class="layui-nav layui-nav-tree"
        lay-filter="test"
        lay-bar="disabled"
        lay-shrink="all"
      >
        <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
        <li class="layui-nav-item layui-nav-itemed">
          <a href="javascript:;"
            ><i class="layui-icon layui-icon-find-fill"></i>个人办公<i
              class="layui-icon layui-icon-triangle-d"
            ></i
          ></a>
          <dl class="layui-nav-child">
            <dd>
              <a href="javascript:;"
                ><i class="layui-icon layui-icon-radio"></i>流程审批</a
              >
            </dd>
            <dd>
              <a href="javascript:;"
                ><i class="layui-icon layui-icon-radio"></i>流程设置</a
              >
            </dd>
            <dd>
              <a href="#"
                ><i class="layui-icon layui-icon-radio"></i>我的邮件</a
              >
            </dd>
            <dd>
              <a href="#"
                ><i class="layui-icon layui-icon-radio"></i>我的日程</a
              >
            </dd>
            <dd>
              <a href="#"
                ><i class="layui-icon layui-icon-radio"></i>我的计划</a
              >
            </dd>
          </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
          <a href="javascript:;"
            ><i class="layui-icon layui-icon-find-fill"></i>团员信息<i
              class="layui-icon layui-icon-triangle-d"
            ></i
          ></a>
          <dl class="layui-nav-child">
            <dd>
              <a href="javascript:;"
                ><i class="layui-icon layui-icon-radio"></i>团员信息录入</a
              >
            </dd>
            <dd>
              <a href="javascript:;"
                ><i class="layui-icon layui-icon-radio"></i>入团积极分子</a
              >
            </dd>
            <dd>
              <a href="#"
                ><i class="layui-icon layui-icon-radio"></i>团员信息查询</a
              >
            </dd>
            <dd>
              <a href="#"
                ><i class="layui-icon layui-icon-radio"></i>已退团人员信息</a
              >
            </dd>
          </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
          <a href="javascript:;"
            ><i class="layui-icon layui-icon-find-fill"></i>团员荣誉<i
              class="layui-icon layui-icon-triangle-d"
            ></i
          ></a>
          <dl class="layui-nav-child">
            <dd>
              <a href="javascript:;"
                ><i class="layui-icon layui-icon-radio"></i>优秀团员</a
              >
            </dd>
            <dd>
              <a href="javascript:;"
                ><i class="layui-icon layui-icon-radio"></i>团员奖惩</a
              >
            </dd>
            <dd>
              <a href="#"
                ><i class="layui-icon layui-icon-radio"></i>支部荣誉登记</a
              >
            </dd>
            <dd>
              <a href="#" style="font-weight: bolder"
                ><i class="layui-icon layui-icon-radio"></i>荣誉查询<i
                  class="layui-icon layui-icon-triangle-d"
                ></i
              ></a>
              <dl class="layui-nav-child colorfff">
                <dd>
                  <a href="#"
                    ><i class="layui-icon layui-icon-radio"></i>优秀团员查询</a
                  >
                </dd>
                <dd>
                  <a href="#"
                    ><i class="layui-icon layui-icon-radio"></i>团员奖惩查询</a
                  >
                </dd>
                <dd>
                  <a href="#"
                    ><i class="layui-icon layui-icon-radio"></i>支部荣誉查询</a
                  >
                </dd>
              </dl>
            </dd>
          </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
          <a href="javascript:;"
            ><i class="layui-icon layui-icon-find-fill"></i>团委工作<i
              class="layui-icon layui-icon-triangle-d"
            ></i
          ></a>
          <dl class="layui-nav-child">
            <dd>
              <a href="javascript:;"
                ><i class="layui-icon layui-icon-radio"></i>团费记录</a
              >
            </dd>
            <dd>
              <a href="javascript:;"
                ><i class="layui-icon layui-icon-radio"></i>组织生活</a
              >
            </dd>
            <dd>
              <a href="#"
                ><i class="layui-icon layui-icon-radio"></i>工作安排</a
              >
            </dd>
            <dd>
              <a href="#"
                ><i class="layui-icon layui-icon-radio"></i>重要活动</a
              >
            </dd>
            <dd>
              <a href="#" style="font-weight: bolder"
                ><i class="layui-icon layui-icon-radio"></i>团委工作查询<i
                  class="layui-icon layui-icon-triangle-d"
                ></i
              ></a>
              <dl class="layui-nav-child colorfff">
                <dd>
                  <a href="#"
                    ><i class="layui-icon layui-icon-radio"></i>团费查询</a
                  >
                </dd>
                <dd>
                  <a href="#"
                    ><i class="layui-icon layui-icon-radio"></i>组织生活查询</a
                  >
                </dd>
                <dd>
                  <a href="#"
                    ><i class="layui-icon layui-icon-radio"></i>工作安排查询</a
                  >
                </dd>
                <dd>
                  <a href="#"
                    ><i class="layui-icon layui-icon-radio"></i>重要活动查询</a
                  >
                </dd>
              </dl>
            </dd>
          </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
          <a href="javascript:;"
            ><i class="layui-icon layui-icon-find-fill"></i>事件提醒<i
              class="layui-icon layui-icon-triangle-d"
            ></i
          ></a>
          <dl class="layui-nav-child">
            <dd>
              <a href="javascript:;"
                ><i class="layui-icon layui-icon-radio"></i>团员生日提醒</a
              >
            </dd>
            <dd>
              <a href="javascript:;"
                ><i class="layui-icon layui-icon-radio"></i>重要活动提醒</a
              >
            </dd>
          </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
          <a href="javascript:;"
            ><i class="layui-icon layui-icon-find-fill"></i>用户管理<i
              class="layui-icon layui-icon-triangle-d"
            ></i
          ></a>
          <dl class="layui-nav-child">
            <dd>
              <a href="javascript:;"
                ><i class="layui-icon layui-icon-radio"></i>用户列表</a
              >
            </dd>
            <dd>
              <a href="javascript:;"
                ><i class="layui-icon layui-icon-radio"></i>角色设置</a
              >
            </dd>
          </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
          <a href="javascript:;"
            ><i class="layui-icon layui-icon-find-fill"></i>系统设置<i
              class="layui-icon layui-icon-triangle-d"
            ></i
          ></a>
          <dl class="layui-nav-child">
            <dd>
              <a href="javascript:;"
                ><i class="layui-icon layui-icon-radio"></i>系统设置</a
              >
            </dd>
            <dd>
              <a href="javascript:;"
                ><i class="layui-icon layui-icon-radio"></i>登录日志</a
              >
            </dd>
            <dd>
              <a href="javascript:;"
                ><i class="layui-icon layui-icon-radio"></i>数据备份</a
              >
            </dd>
          </dl>
        </li>
      </ul>
    </div>
    <div class="right">
      <div class="right-nav">
        <div class="lefti"><i class="layui-icon layui-icon-slider"></i></div>
        <div class="righri">
          <ul>
            <li>
              <a style="color: rgb(255, 255, 0)" href="#"
                ><i class="layui-icon layui-icon-cart"></i>购买该软件</a
              >
            </li>
            <li>
              <a href="#"
                ><i class="layui-icon layui-icon-cellphone-fine"></i>手机版</a
              >
            </li>
            <li>
              <a href="#"
                ><img
                  src="https://www.deerpu.cn/demo/file/20210119141729-ico.jpg"
                  alt=""
                />&nbsp; admin</a
              >
            </li>
          </ul>
        </div>
      </div>
      <div class="index-nav">
        <div class="zhuye">
          <span class="layui-breadcrumb" lay-separator=">">
            <a href=""><i class="layui-icon layui-icon-home"></i>主页</a>
            <a href="">团员信息</a>
            <a href="">团员信息录入</a>
          </span>
        </div>
        <div class="btnav">
          <button type="button" class="layui-btn layui-btn-xs">
            <i class="layui-icon layui-icon-add-1 layui-font-12">新增</i>
          </button>
          <button type="button" class="layui-btn layui-btn-xs">
            <i class="layui-icon layui-icon-delete layui-font-12">删除</i>
          </button>
          <button type="button" class="layui-btn layui-btn-xs">
            <i class="layui-icon layui-icon-refresh layui-font-12">刷新</i>
          </button>
          <button type="button" class="layui-btn layui-btn-xs">
            <i class="layui-icon layui-icon-export layui-font-12">导出</i>
          </button>
          <button type="button" class="layui-btn layui-btn-xs">
            <i class="layui-icon layui-icon-print layui-font-12">打印</i>
          </button>
        </div>
      </div>
      <div class="rbody">
        <div class="rbtit">
          <label for="#">编号</label>
          <input type="text" />
          <label for="#">姓名</label>
          <input type="text" />
          <label for="#">出生日期</label>
          <input type="date" /> <span>-</span> <input type="time" />
          <button
            style="background-color: #7da6e6"
            type="button"
            class="layui-btn layui-btn-xs chaxun"
          >
            查询
          </button>
          <button
            style="background-color: #7da6e6"
            type="button"
            class="layui-btn layui-btn-xs"
          >
            高级
          </button>
        </div>
        <div class="boxform">
          <div class="boxs">
            <div class="sbtbox">
              <button
                type="button"
                class="layui-btn layui-btn-radius layui-btn-sm"
              >
                展开
              </button>
              <button
                type="button"
                class="layui-btn layui-btn-radius layui-btn-sm"
              >
                收缩
              </button>
            </div>
            <div class="sboxcomm">
            <div class="sex">
              <h3 class="a1">
                <a href="#"
                  ><i class="layui-icon layui-icon-ok-circle"></i>性别</a
                >
              </h3>
              <ul class="u1">
                <li><a style="color: red;" href="">全部</a></li>
                <li>
                  <a href=""><i class="layui-icon layui-icon-file"></i>男</a>
                </li>
                <li>
                  <a href=""><i class="layui-icon layui-icon-file"></i>女</a>
                </li>
                <li>
                  <a href=""><i class="layui-icon layui-icon-file"></i>保密</a>
                </li>
              </ul>
            </div>
            <div class="sex">
              <h3 class="a1">
                <a href="#"
                  ><i class="layui-icon layui-icon-ok-circle"></i>民族</a
                >
              </h3>
              <ul class="u1">
                <li><a style="color: red;" href="">全部</a></li>
                <li>
                  <a href=""><i class="layui-icon layui-icon-file"></i>藏族</a>
                </li>
                <li>
                  <a href=""><i class="layui-icon layui-icon-file"></i>裕固族</a>
                </li>
                <li>
                  <a href=""><i class="layui-icon layui-icon-file"></i>彝族</a>
                </li>
                <li>
                  <a href=""><i class="layui-icon layui-icon-file"></i>瑶族</a>
                  <li>
                    <a href=""><i class="layui-icon layui-icon-file"></i>锡伯族</a>
                    <li>
                      <a href=""><i class="layui-icon layui-icon-file"></i>乌梅别克族</a>
                    </li>
                  </li>
                </li>
              </ul>
            </div>
            <div class="sex">
              <h3 class="a1">
                <a href="#"
                  ><i class="layui-icon layui-icon-ok-circle"></i>状态</a
                >
              </h3>
              <ul class="u1">
                <li><a style="color: red;" href="">全部</a></li>
                <li>
                  <a href=""><i class="layui-icon layui-icon-file"></i>正常</a>
                </li>
                <li>
                  <a href=""><i class="layui-icon layui-icon-file"></i>异常</a>
                </li>
                <li>
                  <a href=""><i class="layui-icon layui-icon-file"></i>锁定</a>
                </li>
                <li>
                  <a href=""><i class="layui-icon layui-icon-file"></i>审核</a>
                </li>
              </ul>
            </div>
            </div>
          </div>
          <div class="boxl">
            <table class="layui-table">
              <colgroup>
                <col width="50">
                <col width="30">
                <col>
              </colgroup>
              <thead>
                <tr>
                  <th><input type="checkbox"></th>
                  <th>操作</th>
                  <th>编号</th>
                  <th>姓名</th>
                  <th>性别</th>
                  <th>出生日期</th>
                  <th>团员证号</th>
                  <th>民族</th>
                  <th>籍贯</th>
                  <th>学历</th>
                  <th>团委</th>
                  <th>团支书</th>
                </tr> 
              </thead>
              <tbody>
                <tr>
                  <td><input type="checkbox"></td>
                  <td>  <button
                    style="background-color: #7da6e6"
                    type="button"
                    class="layui-btn layui-btn-xs"
                  >
                    删除
                  </button>
                  <button
            style="background-color: #7da6e6"
            type="button"
            class="layui-btn layui-btn-xs"
          >
            修改
          </button>
          <button
            style="background-color: #7da6e6"
            type="button"
            class="layui-btn layui-btn-xs"
          >
            查看
          </button></td>
                  <td>2022102103</td>
                
                  
                  <td>张大炮</td>
                  <td>男</td>
                  <td>2000-12-4</td>
                  <td>2012**</td>
                  <td>汉族</td>
                  <td>**省**市**路</td>
                  <td>测试班202</td>
                  <td>**院团委</td>
                  <td>第一团支书</td>
                </tr>
                <tr>
                  <td><input type="checkbox"></td>
                  <td>  <button
                    style="background-color: #7da6e6"
                    type="button"
                    class="layui-btn layui-btn-xs"
                  >
                    删除
                  </button>
                  <button
            style="background-color: #7da6e6"
            type="button"
            class="layui-btn layui-btn-xs"
          >
            修改
          </button>
          <button
            style="background-color: #7da6e6"
            type="button"
            class="layui-btn layui-btn-xs"
          >
            查看
          </button></td>
                  <td>2022102103</td>
                
                  
                  <td>张大炮</td>
                  <td>男</td>
                  <td>2000-12-4</td>
                  <td>2012**</td>
                  <td>汉族</td>
                  <td>**省**市**路</td>
                  <td>测试班202</td>
                  <td>**院团委</td>
                  <td>第一团支书</td>
                </tr>
                <tr>
                  <td><input type="checkbox"></td>
                  <td>  <button
                    style="background-color: #7da6e6"
                    type="button"
                    class="layui-btn layui-btn-xs"
                  >
                    删除
                  </button>
                  <button
            style="background-color: #7da6e6"
            type="button"
            class="layui-btn layui-btn-xs"
          >
            修改
          </button>
          <button
            style="background-color: #7da6e6"
            type="button"
            class="layui-btn layui-btn-xs"
          >
            查看
          </button></td>
                  <td>2022102103</td>
                
                  
                  <td>张大炮</td>
                  <td>男</td>
                  <td>2000-12-4</td>
                  <td>2012**</td>
                  <td>汉族</td>
                  <td>**省**市**路</td>
                  <td>测试班202</td>
                  <td>**院团委</td>
                  <td>第一团支书</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
